<template>
	<view>
		<view class="back" @click="back">
			<view class="backicon"></view>
		</view>
		<view  class="classInfo">
			<view class="text1">
				<text style="font-weight: bold;">快捷考勤</text>
			</view>
			<scroll-view class="scroll-view" :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
			<view v-for="item in classes">
				<view v-if="!item.isTeacherCheck"  class="classes">
					<view class="div1">
						<text>班级: {{item.cname}}</text>
						<text style="margin-left: 100rpx;">应到人数: {{item.studentcount}}</text>
					</view>
					
					<view>
						<text style="margin-left: 20rpx;">请假人数: {{item.leavenum}}</text>
						<input placeholder="实到人数"
						 v-if="item.committee !=null && item.committee !='' "
						 class="myinput" type="number" v-model="item.arrivedcount" />
					</view>
					
					<view>
						<text style="color: #909399;font-size: 14px;margin-left: 10px;" v-if="item.committee !=null && item.committee !='' ">
							班委 {{item.committee}}
						</text>
						<text v-else style="color: #909399;font-size: 14px;margin-left: 10px;">该班级暂未设置班委</text>
					</view>
				</view>
				<view v-else-if="item.isTeacherCheck&&!item.isCommittee"  class="classes">
					<view class="div1">
						<text>班级: {{item.cname}}</text>
						<text style="margin-left: 100rpx;">应到人数: {{item.studentcount}}</text>
					</view>
					
					<view>
						<text style="margin-left: 20rpx; font-size: 16px; color: red;">请假人数: 等待学委确认，请老师稍后</text>
					</view>
					
					<view>
						<text style="color: #909399;font-size: 14px;margin-left: 10px;" v-if="item.committee !=null && item.committee !='' ">
							班委 {{item.committee}}
						</text>
						<text v-else style="color: #909399;font-size: 14px;margin-left: 10px;">该班级暂未设置班委</text>
					</view>
				</view>
				<view v-else  class="classes">
					<view class="div1">
						<text>班级: {{item.cname}}</text>
						<text style="margin-left: 100rpx;">应到人数: {{item.studentcount}}</text>
					</view>
					
					<view>
						<text style="margin-left: 20rpx;font-size: 16px;" >学委名单考勤</text>
						<text style="margin-left: 150rpx; color: red;" @click="ToClock">确认考勤</text>
					</view>
					
					<view>
						<text style="color: #909399;font-size: 14px;margin-left: 10px;" v-if="item.committee !=null && item.committee !='' ">
							班委 {{item.committee}}
						</text>
						<text v-else style="color: #909399;font-size: 14px;margin-left: 10px;">该班级暂未设置班委</text>
					</view>
				</view>
			</view>
			
			
			
		</scroll-view>
		</view>
		<view class="uploadfile">
			<text class="zj">上课照片</text>
			<view style="margin-left: 40rpx;margin-top: 15rpx;">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="3"
					:previewFullImage="true"></u-upload>
			</view>
		</view>
		<view class="ts">
			<text style="margin-right:60px;color: red;" @click="hanldeOpenHelp">功能说明</text>
			<text>照片最多上传3张</text>
		</view>
		<view style="margin-top: 30rpx;">
			<u-button shape="circle"
			 type="primary" @click="deploy" customStyle="width: 650rpx;margin-left:50rpx;height:100rpx">发布快捷考勤</u-button>
		</view>
	</view>
</template>

<script>
import { HNIT_URL, IDENTITY } from '../../../constants';
	export default {
		data() {
			return {
				username:"",
				arrivedcountData:{},//实际到达人数对象
				classes:[],
				fileList1: [], // 证明材料
				fileurllist: [], // 存放文件的url
				newfilepath:[], //上传后的图片数组
				flag:0,
				scrollTop:0,
				old: {
				    scrollTop: 0,
				},
			
			}
		},
		methods: {
			ToClock(){
				uni.reLaunch({
					url: 'clocking'
				});
				
				
			},
			//滚动时触发
			scroll(e) {
			    this.old.scrollTop = e.detail.scrollTop
			},
			//查询所有的上课班级
			queryClasses(){
				this.$request.get(HNIT_URL +"wx/classInfo/getClasses/"+this.username).then(res=>{
					
					
					if(res.code){
						this.classes = res.data;
						if(res.data == null){
							uni.showToast({
								title:"当前暂无课程",
								icon:"none",
							})
							this.flag = 2;
						}
					}else{
						this.flag = 1;
						this.classes=res.data;
					}
				})
			},
			back(){
				if(uni.getStorageSync(IDENTITY)==4){
					uni.reLaunch({url: '/pages/manage/home/index'});
				}else{
					uni.reLaunch({url: '/pages/teacher/home/index'});
				}

			},
			
			//提交
			deploy(){
				if(this.flag == 2){
					uni.showToast({
						title:"当前暂无课程",
						icon:"none",
						duration:500,
					})
				}else if(this.flag ==1){
					uni.showToast({
						title:"已经考勤过了",
						icon:"none"
					})
				}else if(this.flag == 0){
					// 上传多张照片
					for (let i = 0; i < this.fileurllist.length; i++) {
						const result = this.uploadFilePromise(this.fileurllist[i])
					}
					wx.showToast({ title: '发布中...',  duration: 2000, icon: 'loading', mask: true })
					
					setTimeout(res=>{
						let attendancelist = [];
						for (let classInfo of this.classes) {
							// 设置参数
							let params = {
								tid: classInfo.tid,
								sid: classInfo.sid,
								arrivedcount:classInfo.arrivedcount,
								username:this.username,
								image:this.newfilepath.join(","),
							}
							attendancelist.push(params);	
						}
						//发送请求
						uni.request({
							url:HNIT_URL+ "wx/attendance/quickDeploy",
							data:attendancelist,
							method:'POST',
							header:{
								'Content-Type':'application/json'
							},
							success(res) {
								uni.showToast({
									title:res.data.msg,
									icon:'none',
									duration:1000,
									mask:true,
								})
								if(res.data.code){
									setTimeout(res=>{
										uni.reLaunch({
											url: '/pages/teacher/home/index'
										})
									},1000)	
								}
							}
						})
					},1000)
				}
			},
			
			// 删除上传的图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.fileurllist[event.index] = ""
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
			
				lists.map((item) => {
					this.fileList1.push({...item,status: 'success',})
				})
				for (let i = 0; i < lists.length; i++) {
					this.fileurllist.unshift(lists[i].url)
				}
			},
			// 照片上传
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: HNIT_URL + "wx/upload", 
						filePath: url, name: 'file', 
						header: {"Content-Type": "multipart/form-data"},
						success: (res) => {
							let data = JSON.parse(res.data);
							this.newfilepath.push(data.data);
							resolve(res.data);
						}
					});
				})
			},hanldeOpenHelp(){
				//打开提示
				uni.showModal({
				    title: '快捷考勤功能说明',
					content: '老师根据教室已到人数, 输入已到人数, 发布考勤后, 由班级的班长或学委(班长和学委需要管理员或者辅导员在后台预先设置), 清查人数, 把未到学生设置旷课后提交!',
					confirm() {},cancel() {} })
			}
		},
		mounted(){
			this.username = uni.getStorageSync("name");
			this.queryClasses();
		},
		
	}
</script>

<style>
	page {
		background-color: #eeeeee;
	}
	.text1{
		font-size: 45rpx;
		margin-left: 240rpx;
		margin-bottom: 10rpx;
	}
	
	.div1{
		padding: 20rpx;
	}
	
	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 5rpx;
		margin-left: 12rpx;
	}
	
	.back {
		position: fixed;
		width: 80rpx;
		margin-top: -103rpx;
		height: 60rpx;
		margin-left: 20rpx;
		border-radius: 80rpx;
		border: 1rpx #c6c6c6 solid;
		backdrop-filter: blur(5px); /* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
	}
	
	.classInfo{
		margin-top: 100px;
		margin-left: 30px;
	}
	
	.myinput{
		border: 1px solid #909399;
		float: right;
		width: 200rpx;
		margin-right: 20rpx;
		padding: 5px;
		border-radius: 5px;
	}
	
	.uploadfile {
		margin-left: 40rpx;
		margin-top: 40rpx;
		border-radius: 30rpx;
		width: 90%;
		background-color: white;
		height: 255rpx;
	}
	
	.ts {
		margin-top: 20rpx;
		margin-left: 40rpx;
		width: 90%;
		color: #595959;
		font-weight: bold;
	}
	
	.zj{
		margin-left: 40rpx;
		font-weight: bold;
	}
	.classes{
		font-size: 18px;
		background-color: white;
		border-radius:30rpx ;
		margin-right: 40rpx;
		height: 195rpx;
		width: 600rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}
	
	
	.scroll-view {
	    height: 735rpx;
	    width: 650rpx;
		background-color: #03a9f461;
		border-radius:45rpx ;
		
	}
	
</style>
